<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/rear-end/index' }"
				>首页</el-breadcrumb-item
			>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item>订单列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<el-col >
				<el-input
					placeholder="请输入商品名"
					v-model="queryInfo.query"
					clearable
					@clear="processing"
				>
					<el-button
						slot="append"
						icon="el-icon-search"
						@click="processing"
					></el-button>
				</el-input>
			</el-col>
			<el-col >
				<div style="margin-top: 10px;">
					<span>分类：</span>
					<el-button
						plain
						@click="updateStatus(-1)"
						:class="{ btn: btnchecked[0] }"
						>全部</el-button
					>
					<el-button
						plain
						@click="updateStatus(0)"
						:class="{ btn: btnchecked[1] }"
						>未配送</el-button
					>
					<el-button
						plain
						@click="updateStatus(1)"
						:class="{ btn: btnchecked[2] }"
						>已经配送</el-button
					>
					<el-button
						plain
						@click="updateStatus(2)"
						:class="{ btn: btnchecked[3] }"
						>完成配送</el-button
					>
				</div>
			</el-col>
			<el-col >
				<el-table :data="shops" height="250" border style="width: 100%">
					<el-table-column prop="ordersId" label="订单号" width="180">
					</el-table-column>
					<el-table-column prop="goodsName" label="商品名称" width="180">
					</el-table-column>
					<el-table-column label="属性选择" width="180">
						<template slot-scope="scope">
							<div v-for="(many, index) in scope.row.manyStr" :key="index">
								{{ many }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="收货人" width="80">
					</el-table-column>
					<el-table-column prop="tel" label="收货人手机号" width="100">
					</el-table-column>
					<el-table-column prop="address" label="收货地址"> </el-table-column>
					<el-table-column prop="userId" label="购买用户"> </el-table-column>
					<el-table-column label="创建时间" width="140px">
						<template slot-scope="scope">
							{{ scope.row.orderCreateTime | dateFormat }}
						</template>
					</el-table-column>
					<el-table-column label="状态" width="80px">
						<template slot-scope="scope">
							{{ formatStatus(scope.row.status) }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="130px">
						<template slot-scope="scope" class="btn">
							<el-button
								plain
								:disabled="scope.row.status != 0"
								size="mini"
								@click="complete1(scope.row)"
								>发货</el-button
							>
							<el-button
								plain
								:disabled="scope.row.status != 1"
								size="mini"
								@click="complete2(scope.row)"
								>配送成功</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col >
				<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[3, 10, 20, 40]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
			</el-col>
			
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'OrderList',
		data() {
			return {
				admin: {},
				shops: [],
				imgUrl: [],
				btnchecked: [true, false, false, false],
				//查询参数对象
				queryInfo: {
					query: '',
					pagenum: 1,
					pagesize: 3,
					status: -1,
					adminId: '',
				},
				total: 0,
			}
		},
		created() {
			this.processing()
		},

		methods: {
			//处理数据结构
			async processing() {
				this.admin = this.$cookies.get('admin')
				this.queryInfo.adminId = this.admin.adminId
				let res = await this.$api.rear_end.getOrders(this.queryInfo)
				if (res.data.code == 1) {
					this.shops = res.data.data
					this.total = res.data.map.total - 0
					this.shops.forEach(async (item) => {
						item.manyAttrsIndex = item.manyAttrsIndex
							? item.manyAttrsIndex.split(' ')
							: []
						item.pics = item.pics ? item.pics.split(',') : []
						var str = []
						item.manyAttrs.forEach((t, index) => {
							t.attrVals = t.attrVals ? t.attrVals.split(' ') : []
							t.addPrice = t.addPrice ? t.addPrice.split(' ') : []
							t.checkeds = t.checkeds ? t.checkeds.split(' ') : []
							t.manyPics = t.manyPics ? t.manyPics.split(' ') : []
							str.push(t.attrName + ':' + t.attrVals[item.manyAttrsIndex[index]])
						})
						item.manyStr = str
					})
				}
			},
			updateStatus(val) {
				if (val != this.queryInfo.status) {
					this.queryInfo.pagenum=1
					this.queryInfo.pagesize=3
					this.btnchecked[val + 1] = true
					this.btnchecked[this.queryInfo.status + 1] = false
					this.queryInfo.status = val
					this.processing()
				}
			},
			//修改分页每条多少数量
			handleSizeChange(val) {
				this.queryInfo.pagesize = val
				const maxnum = Math.ceil(this.total / val)
				if (this.queryInfo.pagenum > maxnum) {
					this.queryInfo.pagenum = maxnum
				}
				this.processing()
			},
			//修改当前页码
			handleCurrentChange(val) {
				this.queryInfo.pagenum = val
				this.processing()
			},
			// 状态过滤
			formatStatus(val) {
				return val == 1 ? '配送中' : (val == 2 ? '已完成配送' : '未配送')
			},
			async complete1(item) {
				let data = {
					ordersId: item.ordersId,
					status: 1,
					updateid: this.admin.adminId,
				}
				let res = await this.$api.rear_end.isdel(data)
				if (res.data.code == 1) {
					this.$message.success('发货成功')
				} else {
					this.$message.error('发货失败')
				}
				this.processing()
				this.$forceUpdate()
			},
			async complete2(item) {
				let data = {
					ordersId: item.ordersId,
					status: 2,
					updateid: this.admin.adminId,
				}
				let res = await this.$api.rear_end.isdel(data)
				if (res.data.code == 1) {
					this.$message.success('配送完成')
				} else {
					this.$message.error('配送中')
				}

				this.processing()
				this.$forceUpdate()
			},
		},
	}
</script>

<style lang="less" scoped>
	.el-card {
		height: 88vh;
		.el-card__body {
			.el-table {
				height: 65vh !important;
				.el-table__cell {
					.cell {
						display: flex;
						flex-direction: column;
						.el-button {
							width: 100px;
							margin: 5px 0;
						}
					}
				}
			}
		}
	}
	.btn {
		background-color: aquamarine !important;
		border: 1px solid aquamarine !important;
	}
</style>